<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>外卖订餐网</title>
		<link rel="stylesheet" href="layui/css/layui.css" media="all">
		<link rel="stylesheet" type="text/css" href="static/top.css" />
		<style type="text/css">
			.content {
				margin: 20px;
			}
			
			.information {
				text-align: center;
				margin-top: 50px;
			}
			
			.information li {
				margin-top: 10px;
			}
			
			.information img {
				width: 50%;
			}
			
			.bottom {
				margin: 20px;
			}
			
			.bottom img {
				width: 80%;
				height: 200px;
			}
			
			.title {
				border-bottom: 2px solid beige;
				background-color: #90EE90;
			}
		</style>
	</head>

	<body>
		<div class="top">
			<div class="layui-row layui-col-space1">
				<div class="layui-col-md7 ">
					<img src="img/logo1.jpg" />
				</div>
				<div class="layui-col-md5">
					<h1>Welcome</h1>
					<p>你来点，我来送</p>
					<p>足不出户让你享受全城美食</p>
				</div>
			</div>
		</div>
		<div class="content">
			<div class="layui-row layui-col-space10">
				<div class="layui-col-md2">
					<ul class="layui-nav layui-nav-tree" lay-filter="test">
						<li class="layui-nav-item">
							<a href="">全部分类</a>
						</li>
						<li class="layui-nav-item">
							<a href=""><i class="layui-icon">&#xe636;</i> 中餐</a>
						</li>
						<li class="layui-nav-item">
							<a href="">火锅</a>
						</li>
						<li class="layui-nav-item">
							<a href="">自助餐</a>
						</li>
						<li class="layui-nav-item">
							<a href="">日韩料理</a>
						</li>
						<li class="layui-nav-item">
							<a href="">咖啡</a>
						</li>
						<li class="layui-nav-item">
							<a href="">甜点饮品</a>
						</li>
						<li class="layui-nav-item">
							<a href="">小吃馆</a>
						</li>
						<li class="layui-nav-item">
							<a href="">包子粥铺</a>
						</li>
					</ul>
				</div>
				<div class="layui-col-md8">
					<div class="layui-carousel" id="test1">
						<div carousel-item>
							<img src="img/photo1.jpg" />
							<img src="img/photo2.jpg" />
							<img src="img/photo3.jpg" />
							<img src="img/photo4.jpg" />
							<img src="img/photo5.jpg" />
						</div>
					</div>
				</div>
				<div class="layui-col-md2" style="border: 2px solid beige; height: 400px;">
					<ul class="information">
						<li>
							<img src="img/usera.jpg" />
						</li>
						<li>
							<button class="layui-btn layui-btn-lg layui-btn-radius layui-btn-primary">我的昵称
							</button>
						</li>
						<li>
							<button class="layui-btn layui-btn-lg layui-btn-radius layui-btn-primary">我的订单
							</button>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="layui-row layui-col-space10" style="border: 2px solid beige;margin-top: 20px;">
				<div class="title">
					<h1>中餐</h1>
				</div>
				<div class="layui-col-md3">
					<a href="order.html">
						<img src="img/photo1.jpg" />
						<h2>好吃点糕点纺</h2>
						<p>迷你纸杯蛋糕一个</p>
						<h2>22.00</h2>
					</a>
				</div>
				<div class="layui-col-md3">
					<a href="order.html">
						<img src="img/photo2.jpg" />
						<h2>好吃点糕点纺</h2>
						<p>迷你纸杯蛋糕一个</p>
						<h2>22.00</h2>
					</a>
				</div>
				<div class="layui-col-md3">
					<a href="order.html">
						<img src="img/photo3.jpg" />
						<h2>好吃点糕点纺</h2>
						<p>迷你纸杯蛋糕一个</p>
						<h2>22.00</h2>
					</a>
				</div>
				<div class="layui-col-md3">
					<img src="img/photo4.jpg" />
					<h2>好吃点糕点纺</h2>
					<p>迷你纸杯蛋糕一个</p>
					<h2>22.00</h2>
				</div>
			</div>
			<div class="layui-row layui-col-space10" style="border: 2px solid beige;margin-top: 20px;">
				<div class="title">
					<h1>中餐</h1>
				</div>
				<div class="layui-col-md3">
					<img src="img/photo1.jpg" />
					<h2>好吃点糕点纺</h2>
					<p>迷你纸杯蛋糕一个</p>
					<h2>22.00</h2>
				</div>
				<div class="layui-col-md3">
					<img src="img/photo2.jpg" />
				</div>
				<div class="layui-col-md3">
					<img src="img/photo3.jpg" />
				</div>
				<div class="layui-col-md3">
					<img src="img/photo4.jpg" />
				</div>
			</div>
			<div class="layui-row layui-col-space10" style="border: 2px solid beige;margin-top: 20px;">
				<div class="title">
					<h1>中餐</h1>
				</div>
				<div class="layui-col-md3">
					<img src="img/photo1.jpg" />
					<h2>好吃点糕点纺</h2>
					<p>迷你纸杯蛋糕一个</p>
					<h2>22.00</h2>
				</div>
				<div class="layui-col-md3">
					<img src="img/photo2.jpg" />
				</div>
				<div class="layui-col-md3">
					<img src="img/photo3.jpg" />
				</div>
				<div class="layui-col-md3">
					<img src="img/photo4.jpg" />
				</div>
			</div>
		</div>
	</body>
	<script src="layui/lay/modules/form.js"></script>
	<script src="layer/layer.js"></script>
	<script src="layui/layui.js"></script>
	<script src="layui/lay/modules/carousel.js"></script>
	<script>
		layui.use('carousel', function() {
			var carousel = layui.carousel;
			//建造实例
			carousel.render({
				elem: '#test1',
				width: '100%', //设置容器宽度
				height: '400px',
				arrow: 'always' //始终显示箭头
				//,anim: 'updown' //切换动画方式
			});
		});
	</script>

</html>